<style>
  .chess-piece{
    width: 60px;
    height: 60px;
    border-radius: 30px;
    position: absolute;
    top: 0;
    left: 0;
  }
  .piece-black{
    background-image: url("/static/images/ai.png");
    background-size: cover;
  }
  .piece-white{
    background-image: url("/static/images/human.png");
    background-size: cover;
  }
  .piece-kill{
    background-image: url("/static/images/kill.png");
    background-size: cover;
  }
  .piece-empty{
    /*background-color: inherit;*/
  }
</style>

<template>
  <div class="chess-piece" :class="piece_color" :style="style" @click="point_click">
  </div>
</template>

<script>
  const POINT_RADIUS = 30;
  export default {
    name: 'piece',
    data () {
      return {
      }
    },

    props: {
      id: Number,
      location: Object,
      piece: Number,// 0:empty 1: black 2: white
      marker: Boolean //true: 可用，false: 不可用（吃子位置）
    },

    computed :{
      style() {
        let x = this.location.x - POINT_RADIUS;
        let y = this.location.y - POINT_RADIUS;
        return {top: y + 'px', left: x + 'px'};
      },
      piece_color() {
        if(!this.marker){
          return 'piece-kill';
        }else {
          if(0 === this.piece){
            return 'piece-empty';
          }else if(1 === this.piece){
            return 'piece-black';
          }else if(2 === this.piece){
            return 'piece-white';
          }else{
            console.log('wrong piece color value: ' + this.piece);
          }
        }
      }
    },

    created: function () {
    },

    methods: {
      point_click: function () {
        console.log(this.id);
      }
    }
  }
</script>
